<!DOCTYPE html>


  <html class="dark page-post">


<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  <title>梳理Immutable常用API | Poetry&#39;s Blog</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="react,Immutable,">
  

  <meta name="description" content="一、fromJS 作用：是最最常用的将原生JS数据转换为ImmutableJS数据的转换方法,默认将原生JS的Array转为List，Object转为Map  Immutable.fromJS(&amp;#123;  a: &amp;#123;    b: [1, 2, 3],    c: 40  &amp;#125;&amp;#125;);// 得到Map &amp;#123;  &quot;a&quot;: Map &amp;#123;    &quot;b&quot;: Lis">
<meta name="keywords" content="react,Immutable">
<meta property="og:type" content="article">
<meta property="og:title" content="梳理Immutable常用API">
<meta property="og:url" content="http://blog.poetries.top/2018/02/04/immutable-api/index.html">
<meta property="og:site_name" content="Poetry&#39;s Blog">
<meta property="og:description" content="一、fromJS 作用：是最最常用的将原生JS数据转换为ImmutableJS数据的转换方法,默认将原生JS的Array转为List，Object转为Map  Immutable.fromJS(&amp;#123;  a: &amp;#123;    b: [1, 2, 3],    c: 40  &amp;#125;&amp;#125;);// 得到Map &amp;#123;  &quot;a&quot;: Map &amp;#123;    &quot;b&quot;: Lis">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2020-08-15T04:25:31.922Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="梳理Immutable常用API">
<meta name="twitter:description" content="一、fromJS 作用：是最最常用的将原生JS数据转换为ImmutableJS数据的转换方法,默认将原生JS的Array转为List，Object转为Map  Immutable.fromJS(&amp;#123;  a: &amp;#123;    b: [1, 2, 3],    c: 40  &amp;#125;&amp;#125;);// 得到Map &amp;#123;  &quot;a&quot;: Map &amp;#123;    &quot;b&quot;: Lis">

  

  
    <link rel="icon" href="/favicon.ico">
  

  <link href="/css/styles.css?v=c114cbeddx" rel="stylesheet">
<link href="/css/other.css?v=c114cbeddx" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/personal-style.css">
  

  

  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?40b1f89aa80f2527b3db779c6898c879";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


  
  <script type="text/javascript">
	(function(){
	    var bp = document.createElement('script');
	    var curProtocol = window.location.protocol.split(':')[0];
	    if (curProtocol === 'https') {
	        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
	    }
	    else {
	        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
	    }
	    var s = document.getElementsByTagName("script")[0];
	    s.parentNode.insertBefore(bp, s);
	})();
  </script>



  
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
  

  <!-- 聊天系统 -->
  
    
   <link type="text/css" rel="stylesheet" href="/renxi/default.css">
   <style>
      #modal {
        position: static !important;
      }
      .filter {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fe5757;
        animation: colorChange 30s ease-in-out infinite;
        animation-fill-mode: both;
        mix-blend-mode: overlay;
      }
  
      @keyframes colorChange {
        0%, 100% {
            opacity: 0;
        }
        50% {
            opacity: .9;
        }
      }
   </style>
</head>
</html>
<body>
  
  
    <span id="toolbox-mobile" class="toolbox-mobile">导航</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">导航</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/categories/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/tags/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/search/"
            rel="noopener noreferrer"
            target="_self"
            >
            搜索
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/link/"
            rel="noopener noreferrer"
            target="_self"
            >
            友链
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录<i class="iconfont toc-title" style="display:inline-block;color:#87998d;width:20px;height:20px;">&#xf004b;</i></strong>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#一、fromJS"><span class="toc-text">一、fromJS</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#二、toJS"><span class="toc-text">二、toJS</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#三、is"><span class="toc-text">三、is</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#四、List-和-Map"><span class="toc-text">四、List 和 Map</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#4-1-创建"><span class="toc-text">4.1 创建</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-2-判断"><span class="toc-text">4.2 判断</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-3-长度"><span class="toc-text">4.3 长度</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#4-3-1-size-获取List-Map的长度"><span class="toc-text">4.3.1 size 获取List/Map的长度**</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-3-2-count"><span class="toc-text">4.3.2 count()</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-4-数据读取"><span class="toc-text">4.4 数据读取</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#4-4-1-get-、-getIn"><span class="toc-text">4.4.1 get() 、 getIn()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-4-2-has-、-hasIn"><span class="toc-text">4.4.2 has() 、 hasIn()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-4-3-includes"><span class="toc-text">4.4.3 includes()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-4-4-first-、-last"><span class="toc-text">4.4.4 first() 、 last()</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-5-数据修改"><span class="toc-text">4.5 数据修改</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#4-5-1-set"><span class="toc-text">4.5.1 set()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-5-2-setIn"><span class="toc-text">4.5.2 setIn()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-5-3-deleteIn"><span class="toc-text">4.5.3 deleteIn()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-5-4-更新-update"><span class="toc-text">4.5.4 更新 update()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-5-5-clear"><span class="toc-text">4.5.5 clear()</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-6-List中的删除与插入"><span class="toc-text">4.6 List中的删除与插入</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#4-6-1-数组方法"><span class="toc-text">4.6.1 数组方法</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-7-关于merge"><span class="toc-text">4.7 关于merge</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-8-序列算法"><span class="toc-text">4.8 序列算法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#4-8-1-concat"><span class="toc-text">4.8.1 concat()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-8-2-map"><span class="toc-text">4.8.2 map()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-8-3-mapKey"><span class="toc-text">4.8.3 mapKey()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-8-4-mapEntries"><span class="toc-text">4.8.4 mapEntries</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-8-5-filter"><span class="toc-text">4.8.5 filter</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-8-6-reverse"><span class="toc-text">4.8.6 reverse</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-8-7-sort-amp-sortBy"><span class="toc-text">4.8.7 sort &amp; sortBy</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-8-8-groupBy"><span class="toc-text">4.8.8 groupBy</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-9-查找数据"><span class="toc-text">4.9 查找数据</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#4-9-1-indexOf-lastIndexOf"><span class="toc-text">4.9.1 indexOf lastIndexOf</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-9-2-findIndex-、-findLastIndex"><span class="toc-text">4.9.2 findIndex() 、 findLastIndex()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-9-3-find-、-findLast"><span class="toc-text">4.9.3 find() 、 findLast()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-9-4-findKey-、-findLastKey"><span class="toc-text">4.9.4 findKey() 、 findLastKey()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-9-5-findEntry-、-findLastEntry"><span class="toc-text">4.9.5 findEntry() 、 findLastEntry()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-9-6-keyOf-lastKeyOf"><span class="toc-text">4.9.6 keyOf() lastKeyOf()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-9-7-max-、-maxBy"><span class="toc-text">4.9.7 max() 、 maxBy()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-9-8-min-、-minBy"><span class="toc-text">4.9.8 min() 、 minBy()</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-10-创建子集"><span class="toc-text">4.10 创建子集</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#4-10-1-slice"><span class="toc-text">4.10.1 slice()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-10-2-rest"><span class="toc-text">4.10.2 rest()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-10-3butLast"><span class="toc-text">4.10.3butLast()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-10-4-skip"><span class="toc-text">4.10.4 skip()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-10-5-skipLast"><span class="toc-text">4.10.5 skipLast()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-10-6-skipWhile"><span class="toc-text">4.10.6 skipWhile()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-10-7-take"><span class="toc-text">4.10.7 take()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-10-8-takeLast"><span class="toc-text">4.10.8 takeLast()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-10-9-takeWhile"><span class="toc-text">4.10.9 takeWhile()</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-11-处理数据"><span class="toc-text">4.11 处理数据</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#4-11-1-reduce"><span class="toc-text">4.11.1 reduce()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-11-2-reduceRight"><span class="toc-text">4.11.2 reduceRight()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-11-3-every"><span class="toc-text">4.11.3 every()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-11-4-some"><span class="toc-text">4.11.4 some()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-11-5-join"><span class="toc-text">4.11.5 join()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-11-6-isEmpty"><span class="toc-text">4.11.6 isEmpty()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-11-7-countBy"><span class="toc-text">4.11.7 countBy()</span></a></li></ol></li></ol></li></ol>
  </div>
  




<div class="content content-post CENTER">
   <!-- canvas 彩带 -->
<canvas id="evanyou" width="1302" height="678" style="position: fixed;width: 100%;height: 100%;top: 0;left:0;z-index:-1;"></canvas>

<article id="post-immutable-api" class="article article-type-post" itemprop="blogPost">
  <header class="article-header" style="position:relative;">
    <h1 class="post-title">梳理Immutable常用API</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2018.02.04</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>Poetry</span>
        </span>
      

      
  <span class="article-category">
    <i class="icon-list"></i>
    <a class="article-category-link" href="/categories/Front-End/">Front-End</a>
  </span>



      

      
      <i class="fa fa-eye"></i> 
        <span id="busuanzi_container_page_pv">
           &nbsp热度 <span id="busuanzi_value_page_pv">
           <i class="fa fa-spinner fa-spin"></i></span>℃
        </span>
      
      
       
          <span class="post-count">
            <i class="fa fa-file-word-o"></i>&nbsp
            <span>字数统计 3.4k字</span>
          </span>

          <span class="post-count">
            <i class="fa fa-columns"></i>&nbsp
            <span>阅读时长 17分</span>
          </span>
      
      
    </div>

    <i class="iconfont" id="toc-eye" style="display:inline-block;color:#b36619;position:absolute;top:0;right:0;cursor:pointer;
    font-size: 24px;">&#xe61c;</i>

  </header>

  <div class="article-content">
    
      <div id="container">
        <h2 id="一、fromJS"><a href="#一、fromJS" class="headerlink" title="一、fromJS"></a>一、fromJS</h2><ul>
<li>作用：是最最常用的将原生JS数据转换为<code>ImmutableJS</code>数据的转换方法,默认将原生<code>JS</code>的<code>Array</code>转为<code>List</code>，<code>Object</code>转为<code>Map</code></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS(&#123;</span><br><span class="line">  a: &#123;</span><br><span class="line">    b: [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>],</span><br><span class="line">    c: <span class="number">40</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">// 得到</span></span><br><span class="line"><span class="built_in">Map</span> &#123;</span><br><span class="line">  <span class="string">"a"</span>: <span class="built_in">Map</span> &#123;</span><br><span class="line">    <span class="string">"b"</span>: List [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>],</span><br><span class="line">    <span class="string">"c"</span>: <span class="number">40</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 常见</span></span><br><span class="line"><span class="keyword">const</span> t1 = Immutable.fromJS(&#123;<span class="attr">a</span>: &#123;<span class="attr">b</span>: [<span class="number">10</span>, <span class="number">20</span>, <span class="number">30</span>]&#125;, <span class="attr">c</span>: <span class="number">40</span>&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(t1);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 不常用</span></span><br><span class="line"><span class="keyword">const</span> t2 = Immutable.fromJS(&#123;<span class="attr">a</span>: &#123;<span class="attr">b</span>: [<span class="number">10</span>, <span class="number">20</span>, <span class="number">30</span>]&#125;, <span class="attr">c</span>: <span class="number">40</span>&#125;, <span class="function"><span class="keyword">function</span>(<span class="params">key, value</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 定制转换方式，下这种就是将Array转换为List，Object转换为Map</span></span><br><span class="line">    <span class="keyword">const</span> isIndexed = Immutable.Iterable.isIndexed(value);</span><br><span class="line">    <span class="keyword">return</span> isIndexed ? value.toList() : value.toOrderedMap();</span><br><span class="line">    <span class="comment">// true, "b", &#123;b: [10, 20, 30]&#125;</span></span><br><span class="line">    <span class="comment">// false, "a", &#123;a: &#123;b: [10, 20, 30]&#125;, c: 40&#125;</span></span><br><span class="line">    <span class="comment">// false, "", &#123;"": &#123;a: &#123;b: [10, 20, 30]&#125;, c: 40&#125;&#125;</span></span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(t2);</span><br></pre></td></tr></table></figure>
<h2 id="二、toJS"><a href="#二、toJS" class="headerlink" title="二、toJS"></a>二、toJS</h2><ul>
<li>作用：将一个<code>Immutable</code>数据转换为<code>JS</code>类型的数据</li>
<li>用法：<code>value.toJS()</code></li>
</ul>
<h2 id="三、is"><a href="#三、is" class="headerlink" title="三、is"></a>三、is</h2><ul>
<li>作用：对两个对象进行比较</li>
<li>用法：<code>is(map1,map2)</code></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; <span class="built_in">Map</span>, is &#125; <span class="keyword">from</span> <span class="string">'immutable'</span></span><br><span class="line"><span class="keyword">const</span> map1 = <span class="built_in">Map</span>(&#123; <span class="attr">a</span>: <span class="number">1</span>, <span class="attr">b</span>: <span class="number">1</span>, <span class="attr">c</span>: <span class="number">1</span> &#125;)</span><br><span class="line"><span class="keyword">const</span> map2 = <span class="built_in">Map</span>(&#123; <span class="attr">a</span>: <span class="number">1</span>, <span class="attr">b</span>: <span class="number">1</span>, <span class="attr">c</span>: <span class="number">1</span> &#125;)</span><br><span class="line"></span><br><span class="line">map1 === map2   <span class="comment">//false</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">Object</span>.is(map1, map2) <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line">is(map1, map2) <span class="comment">//  true 只检测值是否相等</span></span><br></pre></td></tr></table></figure>
<h2 id="四、List-和-Map"><a href="#四、List-和-Map" class="headerlink" title="四、List 和 Map"></a>四、List 和 Map</h2><h3 id="4-1-创建"><a href="#4-1-创建" class="headerlink" title="4.1 创建"></a>4.1 创建</h3><ul>
<li><code>List</code> 有序索引密集的集合，和<code>JS</code>中的<code>Array</code>很像 </li>
<li><code>Map</code> 无序索引集，类似<code>JavaScript</code>中的<code>Object</code></li>
</ul>
<h3 id="4-2-判断"><a href="#4-2-判断" class="headerlink" title="4.2 判断"></a>4.2 判断</h3><ul>
<li><code>List.isList()</code> 和 <code>Map.isMap()</code> 判断一个数据结构是不是<code>List/Map</code>类型</li>
</ul>
<h3 id="4-3-长度"><a href="#4-3-长度" class="headerlink" title="4.3 长度"></a>4.3 长度</h3><h4 id="4-3-1-size-获取List-Map的长度"><a href="#4-3-1-size-获取List-Map的长度" class="headerlink" title="4.3.1 size 获取List/Map的长度**"></a>4.3.1 <code>size</code> 获取<code>List/Map</code>的长度**</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// list</span></span><br><span class="line"><span class="built_in">console</span>.log(List([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]).size);<span class="comment">// 4</span></span><br><span class="line"><span class="built_in">console</span>.log(List.of(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>).size);<span class="comment">// 4</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// map</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Map</span>(&#123;<span class="attr">key</span>: <span class="string">"value2"</span>, <span class="attr">key1</span>: <span class="string">"value1"</span>&#125;).size);<span class="comment">// 2</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Map</span>.of(&#123;<span class="attr">x</span>:<span class="number">1</span>&#125;, <span class="number">2</span>, [<span class="number">3</span>], <span class="number">4</span>).size);<span class="comment">// 2</span></span><br></pre></td></tr></table></figure>
<h4 id="4-3-2-count"><a href="#4-3-2-count" class="headerlink" title="4.3.2 count()"></a>4.3.2 count()</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// map</span></span><br><span class="line"><span class="built_in">console</span>.log(Immutable.fromJS(&#123;<span class="attr">key</span>: <span class="string">"value2"</span>, <span class="attr">key1</span>: <span class="string">"value1"</span>&#125;).count());<span class="comment">// 4</span></span><br><span class="line"><span class="comment">// 可以定制条件，来确定大小</span></span><br><span class="line"><span class="built_in">console</span>.log(Immutable.fromJS(&#123;<span class="attr">key</span>: <span class="number">1</span>, <span class="attr">key1</span>: <span class="number">34</span>&#125;).count(<span class="function">(<span class="params">value, key, obj</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> value &gt; <span class="number">3</span>;</span><br><span class="line">&#125;));<span class="comment">// 1 value大于3的有两个</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// list</span></span><br><span class="line"><span class="built_in">console</span>.log(Immutable.fromJS([<span class="number">1</span>, <span class="number">2</span>, <span class="number">5</span>, <span class="number">6</span>]).count());<span class="comment">// 4</span></span><br><span class="line"><span class="comment">// 可以制定条件，来确定 大小</span></span><br><span class="line"><span class="built_in">console</span>.log(Immutable.fromJS([<span class="number">1</span>, <span class="number">2</span>, <span class="number">5</span>, <span class="number">6</span>]).count(<span class="function">(<span class="params">value, index, array</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> value &gt; <span class="number">3</span>;</span><br><span class="line">&#125;));<span class="comment">// 2 大于3的有两个</span></span><br></pre></td></tr></table></figure>
<h3 id="4-4-数据读取"><a href="#4-4-数据读取" class="headerlink" title="4.4 数据读取"></a>4.4 数据读取</h3><h4 id="4-4-1-get-、-getIn"><a href="#4-4-1-get-、-getIn" class="headerlink" title="4.4.1 get() 、 getIn()"></a>4.4.1 <code>get() 、 getIn()</code></h4><blockquote>
<p>获取数据结构中的数据</p>
</blockquote>
<h4 id="4-4-2-has-、-hasIn"><a href="#4-4-2-has-、-hasIn" class="headerlink" title="4.4.2 has() 、 hasIn()"></a>4.4.2 <code>has() 、 hasIn()</code></h4><blockquote>
<p>判断是否存在某一个<code>key</code></p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,&#123;<span class="attr">a</span>:<span class="number">4</span>,<span class="attr">b</span>:<span class="number">5</span>&#125;]).has(<span class="string">'0'</span>); <span class="comment">//true</span></span><br><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,&#123;<span class="attr">a</span>:<span class="number">4</span>,<span class="attr">b</span>:<span class="number">5</span>&#125;]).has(<span class="string">'0'</span>); <span class="comment">//true</span></span><br><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,&#123;<span class="attr">a</span>:<span class="number">4</span>,<span class="attr">b</span>:<span class="number">5</span>&#125;]).hasIn([<span class="number">3</span>,<span class="string">'b'</span>]) <span class="comment">//true</span></span><br></pre></td></tr></table></figure>
<h4 id="4-4-3-includes"><a href="#4-4-3-includes" class="headerlink" title="4.4.3 includes()"></a>4.4.3 <code>includes()</code></h4><blockquote>
<p>判断是否存在某一个<code>value</code></p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,&#123;<span class="attr">a</span>:<span class="number">4</span>,<span class="attr">b</span>:<span class="number">5</span>&#125;]).includes(<span class="number">2</span>); <span class="comment">//true</span></span><br><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,&#123;<span class="attr">a</span>:<span class="number">4</span>,<span class="attr">b</span>:<span class="number">5</span>&#125;]).includes(<span class="string">'2'</span>); <span class="comment">//false 不包含字符2</span></span><br><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,&#123;<span class="attr">a</span>:<span class="number">4</span>,<span class="attr">b</span>:<span class="number">5</span>&#125;]).includes(<span class="number">5</span>); <span class="comment">//false </span></span><br><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,&#123;<span class="attr">a</span>:<span class="number">4</span>,<span class="attr">b</span>:<span class="number">5</span>&#125;]).includes(&#123;<span class="attr">a</span>:<span class="number">4</span>,<span class="attr">b</span>:<span class="number">5</span>&#125;) <span class="comment">//false</span></span><br><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,&#123;<span class="attr">a</span>:<span class="number">4</span>,<span class="attr">b</span>:<span class="number">5</span>&#125;]).includes(Immutable.fromJS(&#123;<span class="attr">a</span>:<span class="number">4</span>,<span class="attr">b</span>:<span class="number">5</span>&#125;)) <span class="comment">//true</span></span><br></pre></td></tr></table></figure>
<h4 id="4-4-4-first-、-last"><a href="#4-4-4-first-、-last" class="headerlink" title="4.4.4 first() 、 last()"></a>4.4.4 <code>first() 、 last()</code></h4><blockquote>
<p>用来获取第一个元素或者最后一个元素，若没有则返回<code>undefined</code></p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,&#123;<span class="attr">a</span>:<span class="number">4</span>,<span class="attr">b</span>:<span class="number">5</span>&#125;]).first()<span class="comment">//1</span></span><br><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,&#123;<span class="attr">a</span>:<span class="number">4</span>,<span class="attr">b</span>:<span class="number">5</span>&#125;]).last()<span class="comment">//&#123;a:4,b:5&#125;</span></span><br><span class="line"></span><br><span class="line">Immutable.fromJS(&#123;<span class="attr">a</span>:<span class="number">1</span>,<span class="attr">b</span>:<span class="number">2</span>,<span class="attr">c</span>:&#123;<span class="attr">d</span>:<span class="number">3</span>,<span class="attr">e</span>:<span class="number">4</span>&#125;&#125;).first() <span class="comment">//1</span></span><br><span class="line">Immutable.fromJS(&#123;<span class="attr">a</span>:<span class="number">1</span>,<span class="attr">b</span>:<span class="number">2</span>,<span class="attr">c</span>:&#123;<span class="attr">d</span>:<span class="number">3</span>,<span class="attr">e</span>:<span class="number">4</span>&#125;&#125;).first() <span class="comment">//&#123;d:3,e:4&#125;</span></span><br></pre></td></tr></table></figure>
<h3 id="4-5-数据修改"><a href="#4-5-数据修改" class="headerlink" title="4.5 数据修改"></a>4.5 数据修改</h3><h4 id="4-5-1-set"><a href="#4-5-1-set" class="headerlink" title="4.5.1 set()"></a>4.5.1 <code>set()</code></h4><blockquote>
<p>设置第一层<code>key</code>、<code>index</code>的值</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">/ <span class="built_in">Map</span></span><br><span class="line"><span class="comment">// 将 key 位置的元素替换为 value</span></span><br><span class="line"><span class="keyword">const</span> $obj1 = <span class="built_in">Map</span>(&#123;<span class="attr">a</span>: &#123;<span class="attr">a1</span>: <span class="number">34</span>&#125;, <span class="attr">b</span>: <span class="number">2</span>, <span class="attr">c</span>: <span class="number">3</span>, <span class="attr">d</span>: <span class="number">444</span>&#125;);</span><br><span class="line"><span class="built_in">console</span>.log($obj1.set(<span class="string">'a'</span>, <span class="number">0</span>).toJS()); <span class="comment">// &#123;a: 0, b: 2, c: 3, d: 444&#125;</span></span><br><span class="line"><span class="built_in">console</span>.log($obj1.set(<span class="string">'e'</span>, <span class="number">99</span>).toJS());  <span class="comment">// &#123;a: 1, b: 2, c: 3, d: 444, e: 99&#125;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// List</span></span><br><span class="line"><span class="comment">// 将 index 位置的元素替换为 value，即使索引越界也是安全的, 空位 undefined</span></span><br><span class="line"><span class="keyword">const</span> $arr1 = List([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]);</span><br><span class="line"><span class="built_in">console</span>.log($arr1.set(<span class="number">-1</span>, <span class="number">0</span>).toJS()); <span class="comment">// [1, 2, 0]  注意-1 等效于 $arr1.set($arr1.size + -1, 0)</span></span><br><span class="line"><span class="built_in">console</span>.log($arr1.set(<span class="number">4</span>, <span class="number">0</span>).toJS());  <span class="comment">// [ 1, 2, 3, undefined, 0 ]  空位置为了undefined</span></span><br></pre></td></tr></table></figure>
<h4 id="4-5-2-setIn"><a href="#4-5-2-setIn" class="headerlink" title="4.5.2 setIn()"></a>4.5.2 <code>setIn()</code></h4><blockquote>
<p>设置深层结构中某属性的值</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// Map</span></span><br><span class="line"><span class="built_in">console</span>.log(Immutable.fromJS([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, &#123;<span class="attr">a</span>: <span class="number">45</span>, <span class="attr">b</span>: <span class="number">64</span>&#125;]).setIn([<span class="string">'3'</span>, <span class="string">'a'</span>], <span class="number">1000</span>).toJS());<span class="comment">//[1, 2, 3, &#123;a: 1000, b: 64&#125;]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// List</span></span><br><span class="line"><span class="built_in">console</span>.log(Immutable.fromJS([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, &#123;<span class="attr">a</span>: <span class="number">45</span>, <span class="attr">b</span>: <span class="number">64</span>&#125;]).setIn([<span class="string">'3'</span>, <span class="string">'a'</span>], <span class="number">1000</span>).toJS());<span class="comment">//[1, 2, 3, &#123;a: 1000, b: 64&#125;]</span></span><br></pre></td></tr></table></figure>
<h4 id="4-5-3-deleteIn"><a href="#4-5-3-deleteIn" class="headerlink" title="4.5.3 deleteIn()"></a>4.5.3 <code>deleteIn()</code></h4><blockquote>
<p>用来删除深层数据，用法参考<code>setIn</code></p>
</blockquote>
<h4 id="4-5-4-更新-update"><a href="#4-5-4-更新-update" class="headerlink" title="4.5.4 更新 update()"></a>4.5.4 <code>更新 update()</code></h4><blockquote>
<p>对对象中的某个属性进行更新，可对原数据进行相关操作</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">////List</span></span><br><span class="line"><span class="keyword">const</span> list = List([ <span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span> ])</span><br><span class="line"><span class="keyword">const</span> result = list.update(<span class="number">2</span>, val =&gt; val.toUpperCase())</span><br><span class="line"></span><br><span class="line"><span class="comment">///Map</span></span><br><span class="line"><span class="keyword">const</span> aMap = <span class="built_in">Map</span>(&#123; <span class="attr">key</span>: <span class="string">'value'</span> &#125;)</span><br><span class="line"><span class="keyword">const</span> newMap = aMap.update(<span class="string">'key'</span>, value =&gt; value + value)</span><br></pre></td></tr></table></figure>
<h4 id="4-5-5-clear"><a href="#4-5-5-clear" class="headerlink" title="4.5.5 clear()"></a>4.5.5 <code>clear()</code></h4><blockquote>
<p>清除所有数据</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Map</span>(&#123; <span class="attr">key</span>: <span class="string">'value'</span> &#125;).clear()  <span class="comment">//Map</span></span><br><span class="line">List([ <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span> ]).clear()   <span class="comment">// List</span></span><br></pre></td></tr></table></figure>
<h3 id="4-6-List中的删除与插入"><a href="#4-6-List中的删除与插入" class="headerlink" title="4.6 List中的删除与插入"></a>4.6 List中的删除与插入</h3><h4 id="4-6-1-数组方法"><a href="#4-6-1-数组方法" class="headerlink" title="4.6.1 数组方法"></a>4.6.1 数组方法</h4><blockquote>
<p><code>List</code>对应的数据结构是<code>js</code>中的数组，所以数组的一些方法在<code>Immutable</code>中也是通用的，比如<code>push</code>，<code>pop</code>,<code>shift</code>，<code>unshift</code>，<code>insert</code></p>
</blockquote>
<ul>
<li><code>push()</code>：在<code>List</code>末尾插入一个元素</li>
<li><code>pop()</code>: 在<code>List</code>末尾删除一个元素</li>
<li><code>unshift</code>: 在<code>List</code>首部插入一个元素</li>
<li><code>shift</code>: 在<code>List</code>首部删除一个元素</li>
<li><code>insert</code>：在<code>List</code>的<code>index</code>处插入元素</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">List([ <span class="number">0</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span> ]).insert(<span class="number">6</span>, <span class="number">5</span>) <span class="comment">//List [ 0, 1, 2, 3, 4, 5 ]</span></span><br><span class="line">List([ <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span> ]).push(<span class="number">5</span>) <span class="comment">// List [ 1, 2, 3, 4, 5 ]</span></span><br><span class="line">List([ <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span> ]).pop() <span class="comment">// List[ 1, 2, 3 ]</span></span><br><span class="line">List([ <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]).unshift(<span class="number">1</span>) <span class="comment">// List [ 1, 2, 3, 4 ]</span></span><br><span class="line">List([ <span class="number">0</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span> ]).shift() <span class="comment">// List [ 1, 2, 3, 4 ]</span></span><br></pre></td></tr></table></figure>
<h3 id="4-7-关于merge"><a href="#4-7-关于merge" class="headerlink" title="4.7 关于merge"></a>4.7 关于merge</h3><ul>
<li><code>merge</code> 浅合并，新数据与旧数据对比，旧数据中不存在的属性直接添加，旧数据中已存在的属性用新数据中的覆盖</li>
<li><code>mergrWith</code> 自定义浅合并，可自行设置某些属性的值</li>
<li><code>mergeIn</code> 对深层数据进行浅合并</li>
<li><code>mergeDeep</code> 深合并，新旧数据中同时存在的的属性为新旧数据合并之后的数据</li>
<li><code>mergeDeepIn</code>  对深层数据进行深合并</li>
<li><code>mergrDeepWith</code>  自定义深合并，可自行设置某些属性的值</li>
</ul>
<blockquote>
<p>这里用一段示例彻底搞懂<code>merge</code>，此示例为<code>Map</code>结构，<code>List</code>与<code>Map</code>原理相同</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> Map1 = Immutable.fromJS(&#123;<span class="attr">a</span>:<span class="number">111</span>,<span class="attr">b</span>:<span class="number">222</span>,<span class="attr">c</span>:&#123;<span class="attr">d</span>:<span class="number">333</span>,<span class="attr">e</span>:<span class="number">444</span>&#125;&#125;);</span><br><span class="line"> <span class="keyword">const</span> Map2 = Immutable.fromJS(&#123;<span class="attr">a</span>:<span class="number">111</span>,<span class="attr">b</span>:<span class="number">222</span>,<span class="attr">c</span>:&#123;<span class="attr">e</span>:<span class="number">444</span>,<span class="attr">f</span>:<span class="number">555</span>&#125;&#125;);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> Map3 = Map1.merge(Map2);</span><br><span class="line">  <span class="comment">//Map &#123;a:111,b:222,c:&#123;e:444,f:555&#125;&#125;</span></span><br><span class="line"> <span class="keyword">const</span> Map4 = Map1.mergeDeep(Map2);</span><br><span class="line">  <span class="comment">//Map &#123;a:111,b:222,c:&#123;d:333,e:444,f:555&#125;&#125;</span></span><br><span class="line"> <span class="keyword">const</span> Map5 = Map1.mergeWith(<span class="function">(<span class="params">oldData,newData,key</span>)=&gt;</span>&#123;</span><br><span class="line">      <span class="keyword">if</span>(key === <span class="string">'a'</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">666</span>;</span><br><span class="line">      &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> newData</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,Map2);</span><br><span class="line">  <span class="comment">//Map &#123;a:666,b:222,c:&#123;e:444,f:555&#125;&#125;</span></span><br></pre></td></tr></table></figure>
<h3 id="4-8-序列算法"><a href="#4-8-序列算法" class="headerlink" title="4.8 序列算法"></a>4.8 序列算法</h3><h4 id="4-8-1-concat"><a href="#4-8-1-concat" class="headerlink" title="4.8.1 concat()"></a>4.8.1 <code>concat()</code></h4><blockquote>
<p>对象的拼接，用法与<code>js</code>数组中的<code>concat()</code>相同，返回一个新的对象</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> List = list1.concat(list2)</span><br></pre></td></tr></table></figure>
<h4 id="4-8-2-map"><a href="#4-8-2-map" class="headerlink" title="4.8.2 map()"></a>4.8.2 <code>map()</code></h4><blockquote>
<p>遍历整个对象，对<code>Map/List</code>元素进行操作，返回一个新的对象</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Map</span>(&#123;<span class="attr">a</span>:<span class="number">1</span>,<span class="attr">b</span>:<span class="number">2</span>&#125;).map(<span class="function"><span class="params">val</span>=&gt;</span><span class="number">10</span>*val)</span><br><span class="line"><span class="comment">//Map&#123;a:10,b:20&#125;</span></span><br></pre></td></tr></table></figure>
<h4 id="4-8-3-mapKey"><a href="#4-8-3-mapKey" class="headerlink" title="4.8.3 mapKey()"></a>4.8.3 mapKey()</h4><blockquote>
<p><code>Map</code>特有的<code>mapKey()</code> 遍历整个对象，对<code>Map</code>元素的<code>key</code>进行操作，返回一个新的对象</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Map</span>(&#123;<span class="attr">a</span>:<span class="number">1</span>,<span class="attr">b</span>:<span class="number">2</span>&#125;).mapKey(<span class="function"><span class="params">val</span>=&gt;</span>val+<span class="string">'l'</span>)</span><br><span class="line"><span class="comment">//Map&#123;al:10,bl:20&#125;</span></span><br></pre></td></tr></table></figure>
<h4 id="4-8-4-mapEntries"><a href="#4-8-4-mapEntries" class="headerlink" title="4.8.4 mapEntries"></a>4.8.4 mapEntries</h4><blockquote>
<p><code>Map特有的mapEntries()</code>  遍历整个对象，对<code>Map</code>元素的<code>key</code>和<code>value</code>同时进行操作，返回一个新的对象。<code>Map</code>的<code>map()</code>也可实现此功能</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Map</span>(&#123;<span class="attr">a</span>:<span class="number">1</span>,<span class="attr">b</span>:<span class="number">2</span>&#125;).map(<span class="function">(<span class="params">key,val</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> [key+<span class="string">'l'</span>,val*<span class="number">10</span>]</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//Map&#123;al:10,bl:20&#125;</span></span><br></pre></td></tr></table></figure>
<h4 id="4-8-5-filter"><a href="#4-8-5-filter" class="headerlink" title="4.8.5 filter"></a>4.8.5 filter</h4><blockquote>
<ul>
<li><code>过滤 filter</code> 返回一个新的对象，包括所有满足过滤条件的元素</li>
<li>还有一个<code>filterNot()</code>方法，与此方法正好相反</li>
</ul>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Map</span>(&#123;<span class="attr">a</span>:<span class="number">1</span>,<span class="attr">b</span>:<span class="number">2</span>&#125;).filter(<span class="function">(<span class="params">key,val</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> val == <span class="number">2</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//Map&#123;b:2&#125;</span></span><br></pre></td></tr></table></figure>
<h4 id="4-8-6-reverse"><a href="#4-8-6-reverse" class="headerlink" title="4.8.6 reverse"></a>4.8.6 reverse</h4><blockquote>
<p>作用：将数据的结构进行反转</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>]).reverse(); <span class="comment">// List [5,4,3,2,1]</span></span><br><span class="line">Immutable.fromJS(&#123;<span class="attr">a</span>:<span class="number">1</span>,<span class="attr">b</span>:&#123;<span class="attr">c</span>:<span class="number">2</span>,<span class="attr">d</span>:<span class="number">3</span>&#125;,<span class="attr">e</span>:<span class="number">4</span>&#125;).recerse();</span><br><span class="line"><span class="comment">//Map &#123;e:4,b:&#123;c:2,d:3&#125;,a:1&#125;</span></span><br></pre></td></tr></table></figure>
<h4 id="4-8-7-sort-amp-sortBy"><a href="#4-8-7-sort-amp-sortBy" class="headerlink" title="4.8.7 sort &amp; sortBy"></a>4.8.7 sort &amp; sortBy</h4><blockquote>
<p><code>排序 sort &amp; sortBy</code> 作用：对数据结构进行排序</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">///List</span></span><br><span class="line">Immutable.fromJS([<span class="number">4</span>,<span class="number">3</span>,<span class="number">5</span>,<span class="number">2</span>,<span class="number">6</span>,<span class="number">1</span>]).sort()</span><br><span class="line"><span class="comment">// List [1,2,3,4,5,6]</span></span><br><span class="line">Immutable.fromJS([<span class="number">4</span>,<span class="number">3</span>,<span class="number">5</span>,<span class="number">2</span>,<span class="number">6</span>,<span class="number">1</span>]).sort(<span class="function">(<span class="params">a,b</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (a &lt; b) &#123; <span class="keyword">return</span> <span class="number">-1</span>; &#125;</span><br><span class="line">  <span class="keyword">if</span> (a &gt; b) &#123; <span class="keyword">return</span> <span class="number">1</span>; &#125;</span><br><span class="line">  <span class="keyword">if</span> (a === b) &#123; <span class="keyword">return</span> <span class="number">0</span>; &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// List [1,2,3,4,5,6]</span></span><br><span class="line">Immutable.fromJS([&#123;<span class="attr">a</span>:<span class="number">3</span>&#125;,&#123;<span class="attr">a</span>:<span class="number">2</span>&#125;,&#123;<span class="attr">a</span>:<span class="number">4</span>&#125;,&#123;<span class="attr">a</span>:<span class="number">1</span>&#125;]).sortBy(<span class="function">(<span class="params">val,index,obj</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> val.get(<span class="string">'a'</span>)</span><br><span class="line">&#125;,(a,b)=&gt;&#123;</span><br><span class="line">  <span class="keyword">if</span> (a &lt; b) &#123; <span class="keyword">return</span> <span class="number">-1</span>; &#125;</span><br><span class="line">  <span class="keyword">if</span> (a &gt; b) &#123; <span class="keyword">return</span> <span class="number">1</span>; &#125;</span><br><span class="line">  <span class="keyword">if</span> (a === b) &#123; <span class="keyword">return</span> <span class="number">0</span>; &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//List  [ &#123;a:3&#125;, &#123;a:2&#125;, &#123;a:4&#125;, &#123;a:1&#125; ]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//Map</span></span><br><span class="line"></span><br><span class="line">Immutable.fromJS( &#123;<span class="attr">b</span>:<span class="number">1</span>, <span class="attr">a</span>: <span class="number">3</span>, <span class="attr">c</span>: <span class="number">2</span>, <span class="attr">d</span>:<span class="number">5</span>&#125; ).sort()</span><br><span class="line"><span class="comment">//Map &#123;b: 1, c: 2, a: 3, d: 5&#125;</span></span><br><span class="line">Immutable.fromJS( &#123;<span class="attr">b</span>:<span class="number">1</span>, <span class="attr">a</span>: <span class="number">3</span>, <span class="attr">c</span>: <span class="number">2</span>, <span class="attr">d</span>:<span class="number">5</span>&#125; ).sort(<span class="function">(<span class="params">a,b</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (a &lt; b) &#123; <span class="keyword">return</span> <span class="number">-1</span>; &#125;</span><br><span class="line">  <span class="keyword">if</span> (a &gt; b) &#123; <span class="keyword">return</span> <span class="number">1</span>; &#125;</span><br><span class="line">  <span class="keyword">if</span> (a === b) &#123; <span class="keyword">return</span> <span class="number">0</span>; &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//Map &#123;b: 1, c: 2, a: 3, d: 5&#125;</span></span><br><span class="line">Immutable.fromJS( &#123;<span class="attr">b</span>:<span class="number">1</span>, <span class="attr">a</span>: <span class="number">3</span>, <span class="attr">c</span>: <span class="number">2</span>, <span class="attr">d</span>:<span class="number">5</span>&#125; ).sortBy(<span class="function">(<span class="params">value, key, obj</span>)=&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> value</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//Map &#123;b: 1, c: 2, a: 3, d: 5&#125;</span></span><br></pre></td></tr></table></figure>
<h4 id="4-8-8-groupBy"><a href="#4-8-8-groupBy" class="headerlink" title="4.8.8 groupBy"></a>4.8.8 groupBy</h4><blockquote>
<p><code>分组 groupBy</code>  作用：对数据进行分组</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> listOfMaps = List([</span><br><span class="line">  <span class="built_in">Map</span>(&#123; <span class="attr">v</span>: <span class="number">0</span> &#125;),</span><br><span class="line">  <span class="built_in">Map</span>(&#123; <span class="attr">v</span>: <span class="number">1</span> &#125;),</span><br><span class="line">  <span class="built_in">Map</span>(&#123; <span class="attr">v</span>: <span class="number">1</span> &#125;),</span><br><span class="line">  <span class="built_in">Map</span>(&#123; <span class="attr">v</span>: <span class="number">0</span> &#125;),</span><br><span class="line">  <span class="built_in">Map</span>(&#123; <span class="attr">v</span>: <span class="number">2</span> &#125;)</span><br><span class="line">])</span><br><span class="line"><span class="keyword">const</span> groupsOfMaps = listOfMaps.groupBy(<span class="function"><span class="params">x</span> =&gt;</span> x.get(<span class="string">'v'</span>))</span><br><span class="line"><span class="comment">// Map &#123;</span></span><br><span class="line"><span class="comment">//   0: List [ Map&#123; "v": 0 &#125;, Map &#123; "v": 0 &#125; ],</span></span><br><span class="line"><span class="comment">//   1: List [ Map&#123; "v": 1 &#125;, Map &#123; "v": 1 &#125; ],</span></span><br><span class="line"><span class="comment">//   2: List [ Map&#123; "v": 2 &#125; ],</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br></pre></td></tr></table></figure>
<h3 id="4-9-查找数据"><a href="#4-9-查找数据" class="headerlink" title="4.9 查找数据"></a>4.9 查找数据</h3><h4 id="4-9-1-indexOf-lastIndexOf"><a href="#4-9-1-indexOf-lastIndexOf" class="headerlink" title="4.9.1 indexOf lastIndexOf"></a>4.9.1 indexOf lastIndexOf</h4><blockquote>
<p>Map不存在此方法 和<code>js</code>数组中的方法相同，查找第一个或者最后一个<code>value</code>的<code>index</code>值，找不到则返回<code>-1</code></p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]).indexof(<span class="number">3</span>) <span class="comment">//2</span></span><br><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]).lastIndexof(<span class="number">3</span>) <span class="comment">//2</span></span><br></pre></td></tr></table></figure>
<h4 id="4-9-2-findIndex-、-findLastIndex"><a href="#4-9-2-findIndex-、-findLastIndex" class="headerlink" title="4.9.2 findIndex() 、 findLastIndex()"></a>4.9.2 <code>findIndex() 、 findLastIndex()</code></h4><blockquote>
<p><code>Map</code>不存在此方法,查找满足要求的元素的<code>index</code>值</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]).findIndex(<span class="function">(<span class="params">value,index,array</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value%<span class="number">2</span> === <span class="number">0</span>;</span><br><span class="line">&#125;)   <span class="comment">// 1</span></span><br><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]).findLastIndex(<span class="function">(<span class="params">value,index,array</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> index%<span class="number">2</span> === <span class="number">0</span>;</span><br><span class="line">&#125;)  <span class="comment">// 3</span></span><br></pre></td></tr></table></figure>
<h4 id="4-9-3-find-、-findLast"><a href="#4-9-3-find-、-findLast" class="headerlink" title="4.9.3 find() 、 findLast()"></a>4.9.3 <code>find() 、 findLast()</code></h4><blockquote>
<p>查找满足条件的元素的<code>value</code>值</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]).find(<span class="function">(<span class="params">value,index,array</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value%<span class="number">2</span> === <span class="number">0</span>;</span><br><span class="line">&#125;)  <span class="comment">// 2</span></span><br><span class="line"></span><br><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]).findLast(<span class="function">(<span class="params">value,index,array</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value%<span class="number">2</span> === <span class="number">0</span>;</span><br><span class="line">&#125;)  <span class="comment">// 4</span></span><br></pre></td></tr></table></figure>
<h4 id="4-9-4-findKey-、-findLastKey"><a href="#4-9-4-findKey-、-findLastKey" class="headerlink" title="4.9.4 findKey() 、 findLastKey()"></a>4.9.4 <code>findKey() 、 findLastKey()</code></h4><blockquote>
<p>查找满足条件的元素的<code>key</code>值</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]).findKey(<span class="function">(<span class="params">value,index,array</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value%<span class="number">2</span> === <span class="number">0</span>;</span><br><span class="line">&#125;)  <span class="comment">// 1</span></span><br><span class="line"></span><br><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]).findLastKey(<span class="function">(<span class="params">value,index,array</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value%<span class="number">2</span> === <span class="number">0</span>;</span><br><span class="line">&#125;)  <span class="comment">// 3</span></span><br></pre></td></tr></table></figure>
<h4 id="4-9-5-findEntry-、-findLastEntry"><a href="#4-9-5-findEntry-、-findLastEntry" class="headerlink" title="4.9.5 findEntry() 、 findLastEntry()"></a>4.9.5 <code>findEntry() 、 findLastEntry()</code></h4><blockquote>
<p>查找满足条件的元素的键值对 <code>key:value</code></p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]).findEntry(<span class="function">(<span class="params">value,index,array</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value%<span class="number">2</span> === <span class="number">0</span>;</span><br><span class="line">&#125;)  <span class="comment">// [1,2]</span></span><br><span class="line"></span><br><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]).findLastEntry(<span class="function">(<span class="params">value,index,array</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value%<span class="number">2</span> === <span class="number">0</span>;</span><br><span class="line">&#125;)  <span class="comment">// [3,4]</span></span><br></pre></td></tr></table></figure>
<h4 id="4-9-6-keyOf-lastKeyOf"><a href="#4-9-6-keyOf-lastKeyOf" class="headerlink" title="4.9.6 keyOf() lastKeyOf()"></a>4.9.6 <code>keyOf() lastKeyOf()</code></h4><blockquote>
<p>查找某一个<code>value</code>对应的<code>key</code>值</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]).keyOf(<span class="number">2</span>) <span class="comment">//1</span></span><br><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]).lastKeyOf(<span class="number">2</span>) <span class="comment">//1</span></span><br></pre></td></tr></table></figure>
<h4 id="4-9-7-max-、-maxBy"><a href="#4-9-7-max-、-maxBy" class="headerlink" title="4.9.7 max() 、 maxBy()"></a>4.9.7 <code>max() 、 maxBy()</code></h4><blockquote>
<p>查找最大值</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]).max() <span class="comment">//4</span></span><br><span class="line"></span><br><span class="line">Immutable.fromJS([&#123;a;<span class="number">1</span>&#125;,&#123;<span class="attr">a</span>:<span class="number">2</span>&#125;,&#123;<span class="attr">a</span>: <span class="number">3</span>&#125;,&#123;<span class="attr">a</span>:<span class="number">4</span>&#125;]).maxBy(<span class="function">(<span class="params">value,index,array</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value.get(<span class="string">'a'</span>)</span><br><span class="line">&#125;)  <span class="comment">//&#123;a:4&#125;</span></span><br></pre></td></tr></table></figure>
<h4 id="4-9-8-min-、-minBy"><a href="#4-9-8-min-、-minBy" class="headerlink" title="4.9.8 min() 、 minBy()"></a>4.9.8 <code>min() 、 minBy()</code></h4><blockquote>
<p>查找最小值</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]).min() <span class="comment">//1</span></span><br><span class="line"></span><br><span class="line">Immutable.fromJS([&#123;a;<span class="number">1</span>&#125;,&#123;<span class="attr">a</span>:<span class="number">2</span>&#125;,&#123;<span class="attr">a</span>: <span class="number">3</span>&#125;,&#123;<span class="attr">a</span>:<span class="number">4</span>&#125;]).minBy(<span class="function">(<span class="params">value,index,array</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value.get(<span class="string">'a'</span>)</span><br><span class="line">&#125;)  <span class="comment">//&#123;a:1&#125;</span></span><br></pre></td></tr></table></figure>
<h3 id="4-10-创建子集"><a href="#4-10-创建子集" class="headerlink" title="4.10 创建子集"></a>4.10 创建子集</h3><h4 id="4-10-1-slice"><a href="#4-10-1-slice" class="headerlink" title="4.10.1 slice()"></a>4.10.1 <code>slice()</code></h4><blockquote>
<p>和原生<code>js</code>中数组的<code>slice</code>数组一样，包含两个参数，<code>start</code>和<code>end</code>，<code>start</code>代表开始截取的位置，<code>end</code>代表结束的位置，不包括第<code>end</code>的元素。若不包括<code>end</code>，则返回整个对象，若<code>end</code>为负数，则返回（<code>start</code>，<code>length-end</code>）对应的数据。若<code>start</code>只有一个并且为负数，则返回最后的<code>end</code>个元素</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]).slice(<span class="number">0</span>); <span class="comment">//[1,2,3,4]</span></span><br><span class="line">Immutable.fromJS([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]).slice(<span class="number">0</span>,<span class="number">2</span>); <span class="comment">//[1,2]</span></span><br><span class="line">Immutable.fromJS([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]).slice(<span class="number">-2</span>); <span class="comment">//[3,4]</span></span><br><span class="line">Immutable.fromJS([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]).slice(<span class="number">0</span>,<span class="number">-2</span>); <span class="comment">//[1,2]</span></span><br></pre></td></tr></table></figure>
<h4 id="4-10-2-rest"><a href="#4-10-2-rest" class="headerlink" title="4.10.2 rest()"></a>4.10.2 <code>rest()</code></h4><blockquote>
<p>返回除第一个元素之外的所有元素</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]).rest()<span class="comment">//[2,3,4]</span></span><br></pre></td></tr></table></figure>
<h4 id="4-10-3butLast"><a href="#4-10-3butLast" class="headerlink" title="4.10.3butLast()"></a>4.10.3<code>butLast()</code></h4><blockquote>
<p>返回除最后一个元素之外的所有元素</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]).rest()<span class="comment">//[1,2,3]</span></span><br></pre></td></tr></table></figure>
<h4 id="4-10-4-skip"><a href="#4-10-4-skip" class="headerlink" title="4.10.4 skip()"></a>4.10.4 <code>skip()</code></h4><blockquote>
<p>有一个参数<code>n</code>, 返回截掉前<code>n</code>个元素之后剩下的所有元素</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]).skip(<span class="number">1</span>)<span class="comment">//[2,3,4]</span></span><br></pre></td></tr></table></figure>
<h4 id="4-10-5-skipLast"><a href="#4-10-5-skipLast" class="headerlink" title="4.10.5 skipLast()"></a>4.10.5 <code>skipLast()</code></h4><blockquote>
<p>有一个参数<code>n</code>, 返回截掉最后n个元素之后剩下的所有元素</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]).skip(<span class="number">1</span>)<span class="comment">//[1,2,3]</span></span><br></pre></td></tr></table></figure>
<h4 id="4-10-6-skipWhile"><a href="#4-10-6-skipWhile" class="headerlink" title="4.10.6 skipWhile()"></a>4.10.6 <code>skipWhile()</code></h4><blockquote>
<p>返回从第一次返回<code>false</code>之后的所有元素</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]).skipWhile(list.skipWhile(<span class="function">(<span class="params">value,index,list</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value &gt; <span class="number">2</span>;</span><br><span class="line">&#125;))<span class="comment">// [1,2,3,4]</span></span><br><span class="line">skipUntil()</span><br></pre></td></tr></table></figure>
<h4 id="4-10-7-take"><a href="#4-10-7-take" class="headerlink" title="4.10.7 take()"></a>4.10.7 <code>take()</code></h4><blockquote>
<p>有一个参数n, 返回前n个元素</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]).take(<span class="number">2</span>)<span class="comment">//[1,2]</span></span><br></pre></td></tr></table></figure>
<h4 id="4-10-8-takeLast"><a href="#4-10-8-takeLast" class="headerlink" title="4.10.8 takeLast()"></a>4.10.8 <code>takeLast()</code></h4><blockquote>
<p>有一个参数n, 返回最后n个元素</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]).takeLast(<span class="number">2</span>)<span class="comment">//[3,4]</span></span><br></pre></td></tr></table></figure>
<h4 id="4-10-9-takeWhile"><a href="#4-10-9-takeWhile" class="headerlink" title="4.10.9 takeWhile()"></a>4.10.9 <code>takeWhile()</code></h4><blockquote>
<p>返回从第一次返回<code>false</code>之前的所有元素</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]).skipWhile(list.takeWhile(<span class="function">(<span class="params">value,index,list</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value &gt; <span class="number">2</span>;</span><br><span class="line">&#125;))<span class="comment">// []</span></span><br><span class="line">takeUntil()</span><br></pre></td></tr></table></figure>
<h3 id="4-11-处理数据"><a href="#4-11-处理数据" class="headerlink" title="4.11 处理数据"></a>4.11 处理数据</h3><h4 id="4-11-1-reduce"><a href="#4-11-1-reduce" class="headerlink" title="4.11.1 reduce()"></a>4.11.1 <code>reduce()</code></h4><blockquote>
<p>和<code>js</code>中数组中的<code>reduce</code>相同,按索引升序的顺序处理元素</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]).reduce(<span class="function">(<span class="params">pre,next,index,arr</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(pre+next)</span><br><span class="line">  <span class="keyword">return</span> pre+next; </span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 3 6 10</span></span><br></pre></td></tr></table></figure>
<h4 id="4-11-2-reduceRight"><a href="#4-11-2-reduceRight" class="headerlink" title="4.11.2 reduceRight()"></a>4.11.2 <code>reduceRight()</code></h4><blockquote>
<p>和<code>js</code>中数组中的<code>reduce</code>相同,按索引降序的顺序处理元素</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]).reduceRight(<span class="function">(<span class="params">pre,next,index,arr</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(pre+next)</span><br><span class="line">  <span class="keyword">return</span> pre+next; </span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 7 9 10</span></span><br></pre></td></tr></table></figure>
<h4 id="4-11-3-every"><a href="#4-11-3-every" class="headerlink" title="4.11.3 every()"></a>4.11.3 <code>every()</code></h4><blockquote>
<p>作用：判断整个对象总中所有的元素是不是都满足某一个条件，都满足返回`true，反之返回false</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]).every(<span class="function">(<span class="params">value,index,arr</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value &gt; <span class="number">2</span></span><br><span class="line">&#125;) <span class="comment">// false</span></span><br></pre></td></tr></table></figure>
<h4 id="4-11-4-some"><a href="#4-11-4-some" class="headerlink" title="4.11.4 some()"></a>4.11.4 <code>some()</code></h4><blockquote>
<p>判断整个对象总中所有的元素是不是存在满足某一个条件的元素，若存在返回true，反之返回false</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]).some(<span class="function">(<span class="params">value,index,arr</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value &gt; <span class="number">2</span></span><br><span class="line">&#125;) <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
<h4 id="4-11-5-join"><a href="#4-11-5-join" class="headerlink" title="4.11.5 join()"></a>4.11.5 <code>join()</code></h4><blockquote>
<p>作用：同<code>js</code>中数组的<code>join</code>方法。把转换为字符串</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]).join(<span class="string">','</span>) <span class="comment">//1,2,3,4</span></span><br></pre></td></tr></table></figure>
<h4 id="4-11-6-isEmpty"><a href="#4-11-6-isEmpty" class="headerlink" title="4.11.6 isEmpty()"></a>4.11.6 <code>isEmpty()</code></h4><blockquote>
<p>作用：判断是否为空</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Immutable.fromJS([]).isEmpty(); <span class="comment">// true</span></span><br><span class="line">Immutable.fromJS(&#123;&#125;).isEmpty(); <span class="comment">// true</span></span><br><span class="line">count()</span><br></pre></td></tr></table></figure>
<h4 id="4-11-7-countBy"><a href="#4-11-7-countBy" class="headerlink" title="4.11.7 countBy()"></a>4.11.7 <code>countBy()</code></h4><blockquote>
<p>与<code>count</code>不同的是，<code>countBy</code>返回一个对象</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> list = Immutable.fromJS([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]);</span><br><span class="line"><span class="keyword">const</span> map = Immutable.fromJS(&#123;<span class="attr">a</span>:<span class="number">1</span>,<span class="attr">b</span>:<span class="number">2</span>,<span class="attr">c</span>:<span class="number">3</span>,<span class="attr">d</span>:<span class="number">4</span>&#125;);</span><br><span class="line"></span><br><span class="line">list.countBy(<span class="function">(<span class="params">value,index,list</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value &gt; <span class="number">2</span>;</span><br><span class="line">&#125; <span class="comment">//&#123;false: 2, true: 2&#125;</span></span><br><span class="line"></span><br><span class="line">map.countBy(<span class="function">(<span class="params">value,index,list</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value &gt; <span class="number">2</span>;</span><br><span class="line">&#125; <span class="comment">//&#123;false: 2, true: 2&#125;</span></span><br></pre></td></tr></table></figure>

      </div>
    
  </div>

</article>

<button class="assist-btn2 circle" id="assist_btn2" title="点亮屏幕" style="left: 27px; top: 152px;">
  <i class="iconfont" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>
<button class="assist-btn1 circle" id="assist_btn1" title="关闭屏幕亮度" style="left: 27px; top: 152px;">
  <i class="iconfont toc-title" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>


<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>	

<script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
<script>
  const btw = new BTWPlugin();
  btw.init({
    id: "container",
    blogId: "22699-1592137983091-414",
    name: "前端进阶之旅",
    qrcode: "https://poetries1.gitee.io/img-repo/2020/06/qrcode.jpg",
    keyword: "3a3b3c",
  });
</script>

<script type="text/javascript">

// white theme
var body = {color: "#555", background: "#000"};
var a_tag = {color: "#222"};
var header = { background: "#222"};
var logo_line_i = {background: "#222"};
// var post_code = {background: "#eee", color: "#222"};

function switch_theme() {
 $("body").css(body);
 $("a:not('.links-of-author-item a, .site-state-item a, .site-state-posts a, .feed-link a, .motion-element a, .post-tags a, .show-commit-cls a, #donate_board a')").css(a_tag);
 $(".header, .footer").css(header);
 $(".logo-line-before i, .logo-line-after i").css(logo_line_i);
 //$(".post code").css(post_code);
 $("#idhyt-surprise-ball #idhyt-surprise-ball-animation .drag").css(a_tag);
 $(".post-title-link, .posts-expand .post-meta, .post-comments-count, .disqus-comment-count, .post-category a, .post-nav-next a, .post-nav-item a").css(a_tag);
 
 // $("code").css({color: '#c5c8c6', background: '#1d1f21'});
 //$("#assist_btn1").hide(1500);
}

$(function () {
$("#assist_btn2").css("display","none");
 $("#assist_btn1").click(function() {
     switch_theme();
$("div#toc.toc-article").css({
 "background":"#eaeaea",
 "opacity":1
});
$(".toc-article ol").show();
$("#toc.toc-article .toc-title").css("color","#a98602");
$("#assist_btn1").css("display","none");
$("#assist_btn2").css("display","block");
 });
$("#assist_btn2").click(function() {
$("#assist_btn2").css("display","none");
$("#assist_btn1").css("display","block");
$("body").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
     $(".header, .footer").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
$(".toc-article ol").toggle(1000);
 });
});


//背景随机

var Y, O, E, L, B, C, T, z, N, S, A, I;
!function() {
var e = function() {
for (O.clearRect(0, 0, L, B), T = [{
x: 0,
y: .7 * B + C
}, {
x: 0,
y: .7 * B - C
}]; T[1].x < L + C;) t(T[0], T[1])
}, t = function(e, t) {
O.beginPath(), O.moveTo(e.x, e.y), O.lineTo(t.x, t.y);
var n = t.x + (2 * I() - .25) * C,
 r = a(t.y);
O.lineTo(n, r), O.closePath(), N -= S / -50, O.fillStyle = "#" + (127 * A(N) + 128 << 16 | 127 * A(N + S / 3) + 128 << 8 | 127 * A(N + S / 3 * 2) + 128).toString(16), O.fill(), T[0] = T[1], T[1] = {
 x: n,
 y: r
}
}, a = function n(e) {
var t = e + (2 * I() - 1.1) * C;
return t > B || t < 0 ? n(e) : t
};
Y = document.getElementById("evanyou"), O = Y.getContext("2d"), E = window.devicePixelRatio || 1, L = window.innerWidth, B = window.innerHeight, C = 90, z = Math, N = 0, S = 2 * z.PI, A = z.cos, I = z.random, Y.width = L * E, Y.height = B * E, O.scale(E, E), O.globalAlpha = .6, document.onclick = e, document.ontouchstart = e, e()
}()

   
$("#toc-eye").click(function(){
$("#toc.toc-article").toggle(1000);
});

</script>


   
  <div class="text-center donation">
    <div class="inner-donation">
      <span class="btn-donation">支持一下</span>
      <div class="donation-body">
        <div class="tip text-center">扫一扫，支持poetries</div>
        <ul>
        
          <li class="item">
            
              <span>微信扫一扫</span>
            
            <img src="/images/weixin.jpg" alt="">
          </li>
        
          <li class="item">
            
              <span>支付宝扫一扫</span>
            
            <img src="/images/zhifubao.jpg" alt="">
          </li>
        
        </ul>
      </div>
    </div>
  </div>


   
  <div class="box-prev-next clearfix">
    <a class="show pull-left" href="/2018/02/02/vsc-config/">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="show pull-right" href="/2018/02/22/pm2-ecosystem-deploy/">
        <i class="icon icon-angle-right"></i>
    </a>
  </div>




</div>


  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/categories/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/tags/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/search/"
              rel="noopener noreferrer"
              target="_self"
              >
              搜索
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/link/"
              rel="noopener noreferrer"
              target="_self"
              >
              友链
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    

    

    
    

    

    
    

    

<!-- Gitalk评论插件通用代码 -->
<div id="gitalk-container"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
const gitalk = new Gitalk({
  clientID: '5567a2c4abb858009d96',
  clientSecret: 'b9039ec056cf5c2346b3cdb63308a28c163f91e5',
  repo: 'poetries.github.io',
  owner: 'poetries',
  // 在这里设置一下截取前50个字符串, 这是因为 github 对 label 的长度有了要求, 如果超过
  // 50个字符串则会报错.
  // id: location.pathname.split('/').pop().substring(0, 49),
  id: location.pathname,
  admin: ['poetries'],
  // facebook-like distraction free mode
  distractionFreeMode: false
})
gitalk.render('gitalk-container')
</script>
<!-- Gitalk代码结束 -->



  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>


  <!-- 页面点击小红心 -->
  <script type="text/javascript" src="/js/clicklove.js"></script>
 
  
</body>
</html>
